<script setup lang="ts">
import { ref, reactive } from "vue";
const msg = "Hello World";
const count = 10;
const price = 2.5;
const isMarry: boolean = false;
const money = 0; // 存款
const age = 20;
const skills = "写代码";

// 声明函数
const getContent = () => {
  return "老高讲V3";
};

// 定义一个点击事件
const clickFn = (a: number, b: number, c: number) => {
  alert("点我干嘛" + a);
};

const changeValue = (event: Event) => {
  const inputDom = event.target as HTMLInputElement;
  console.log("值改变了", inputDom.value);
};
const enterClick = (event: Event) => {
  const obj = event as KeyboardEvent;
  if (obj.key === "Enter") {
    alert("你按了回车键");
  }
};

// 改变性别

const changeSex = () => {
  person.sex = "女";
};

// 改变性别
const seperate = () => {
  isMarried.value = false;
};
// 人类对象

const person = reactive<{
  name: string;
  age: number;
  sex: "男" | "女";
}>({
  name: "张三",
  age: 24,
  sex: "男",
});

// ref声明 简单或复杂数据类型
const isMarried = ref(false);
const people = ref<{
  name: string;
  height: number;
  weight: number;
  money: number;
  childCount: number;
}>({
  name: "高大帅",
  height: 185,
  weight: 80,
  money: 9999999,
  childCount: 10,
});

const groupPeople = () => {
  people.value.money -= 100000;
  people.value.childCount += 1;
  people.value.weight += 10;
  people.value.height -= 2;
};

const weather = ref("晴转多云");

const feeling = ref(
  `<h2><strong style="color:blue"> 我的心情跌落到谷底-我emo了</strong></h2>`
);

// 变脸
const changeFace = () => {
  feeling.value = `
     <h1 style="color: red">
        我发怒了
     </h1>

  `;
};
</script>

<template>
  <div class="container">
    <!-- 插值表达式 -->
    {{ (msg + "Vue3").split("").reverse().join("") }}
    <p>总价：{{ count * price }}</p>
    <p>年龄：{{ `${age}岁` }}</p>
    <p>婚姻状态: {{ isMarry ? "已婚" : "未婚" }}</p>
    <p>存款状态: {{ money || "穷光蛋" }}</p>
    <p>技能：{{ skills }}</p>
    <p>函数调用: {{ getContent() }}</p>
    <p>1 + 2 {{ 1 + 2 }}</p>

    <!-- <button v-on:click="clickFn(1, 2, 3)">测试</button> -->
    <!-- 完整写法v-on:事件名="方法名" -->
    <!-- 语法糖的写法 @click -->
    <button @click="clickFn(1, 2, 3)">测试</button>
    <!-- change/input -->
    <input type="text" @change="changeValue" @keydown="enterClick" />

    <h1>响应式数据Reactive</h1>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <p>性别:{{ person.sex }}</p>
    <button @click="person.sex = '女'">变性</button>
    <button @click="changeSex">变性</button>

    <h1>Ref响应式数据-简单数据类型</h1>
    <p>婚姻状态：{{ isMarried ? "已婚" : "单身🐶" }}</p>
    <button @click="isMarried = true">成家</button>
    <button @click="seperate">离婚</button>

    <h1>Ref响应式数据-复杂数据类型</h1>
    <p>姓名：{{ people.name }}</p>
    <p>身高{{ people.height }}cm</p>
    <p>体重{{ people.weight }}kg</p>
    <p>财产：{{ people.money }}$</p>
    <p>儿女个数：{{ people.childCount }}个</p>
    <button @click="groupPeople">成长</button>

    <h1>v-text和v-html指令</h1>
    <div v-text="weather"></div>
    <div v-html="feeling"></div>
    <button @click="weather = '狂风暴雨'">变天</button>
    <button @click="changeFace">变脸</button>
  </div>
</template>

<style scoped>
.container {
  font-size: 30px;
  font-weight: bolder;
  color: brown;
}
</style>
